<template>
  <div id="app" :class="{active:tid!='0'}">
  	<div class="flyhea">
	  	<header class="clearfix">
	  		<router-link to="/" class="logo" ><img src="./assets/logo.png"/></router-link>
	  		<a class="app" >下载 App</a>
	  		<router-link to="/space" class="face" ></router-link>
	  		<router-link to="/" class="search" ><svg class=""><use xlink:href="#icon-sousuo"></use></svg></router-link>
	  	</header>
	  	<div class="nav-dd">
		  	<nav>
		  		<router-link to="/index" >首页</router-link>
		  		<router-link :to="{name:'channel', params:{id:el.tid.toString()}}" v-for="(el,index) in navd" :key="index" :class="{active:el.tid==tid}" >{{el.typename}}</router-link>
		  	</nav>
		  	<div class="nav-dd-svg" @click="listro">
		  		<svg><use xlink:href="#icon-xialaxiao"></use></svg>
		  	</div>
	  	</div>
	  	<div class="nav-extend" :class="{active:navto}">
		  		<div class="nav-list">
			  		<router-link to="/index" ><span>首页</span></router-link>
			  		<router-link :to="{name:'channel', params:{id:el.tid.toString()}}" v-for="(el,index) in navd" :key="index" :class="{active:el.tid==tid}"><span>{{el.typename}}</span></router-link>
		  		</div>
		  		<div class="extend-svg" @click="listto">
		  			<svg><use xlink:href="#icon-shouqixiao"></use></svg>
		  		</div>
		  	</div>
	  	</div>
    <router-view v-on:navs="navs" :navtid="tid" />
    <copyri></copyri>
    
    <totop></totop>
    <mysvg></mysvg>
    
  </div>
</template>

<script>
import CONFIG from "./config";
import mysvg from './components/svg';
import copyri from './components/copyri'
import totop from './components/totop'
export default {
  name: 'App',
  components: { mysvg,copyri,totop },
  data(){
  	return{
  		navto:false,
  		navd:CONFIG.partitionList["0"],
  		tid:"1",
  	}
  },
  mounted(){
// 		this.act()
	},
	computed:{
	},
//	created(){
//		
//	},
//	watch: {
//  // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
//    '$route': 'act'
// },
  methods:{
  	listro(){
  		this.navto=true
  	},
  	listto(){
  		this.navto=false;
  	},
  	navs(bid){
  		this.tid=bid
  	},
//	act(){
//		var nav=document.querySelectorAll(".nav-dd a");
//		var nav_d=document.querySelectorAll(".nav-list a");
//		if(this.$route.params.id){
//			nav.forEach((el) => {
//				el.classList.remove("active")
//			});
//			nav_d.forEach((el) => {
//				el.classList.remove("active")
//			});
//			nav[this.$route.params.id].classList.add("active");
//			nav_d[this.$route.params.id].classList.add("active");
//		}else{
//			nav.forEach((el) => {
//				el.classList.remove("active")
//			});
//			nav_d.forEach((el) => {
//				el.classList.remove("active")
//			});
//			nav[0].classList.add("active");
//			nav_d[0].classList.add("active");
//		}
//	}
  }
}
</script>

<style lang="scss">
@import "./scss/reset";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  &.active{
  	background-color: #f4f4f4;
  }
}
.flyhea{
	background: #fff;
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 100;
}
header{
	position: relative;
	top: 0;
	z-index: 100;
	height: 32.5px;
	width: 100%;
	padding: 5px 0;
	background-color: #fff;
	.logo{
		float: left;
		height: 100%;
		margin-left:15px;
		img{
			vertical-align: top;
			height: 100%;
		}
	}
	.search{
		margin-right: 8px;
		width: 40px;
		height: 100%;
		float: right;
		svg{
			display: block;
			width: 100%;
	    height: 100%;
	    fill: #aaa;
		}
	}
	.face{
		margin-right: 15px;
		width: 24px;
		height: 100%;
		float: right;
    border-radius: 50%;
    background: url(./assets/noface.gif) no-repeat;
    background-size: 100% ;
    overflow: hidden;
	}
	.app{
		margin-right: 15px;
		text-align: center;
    color: #fff;
		width: 65px;
		height: 100%;
		line-height: 2em;
		float: right;
		font-size: 12px;
    border: .1px solid #fb7299;
    background-color: #fb7299;
    border-radius: 5px;
	}
}
.nav-dd{
	height: 38px;
	overflow: hidden;
	color: #757575;
	position: relative;
}
.nav-dd-svg{
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	width: 40px;
	height: 100%;
	background-color: #fff;
	line-height: 0;
	svg{
		width: 15px;
		height: 100%;
		fill: #aaa;
	}
}
nav{
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding-left: 20px;
	line-height: 0;
	padding-top: 12px;
	margin-right: 40px;
	-webkit-overflow-scrolling: touch;
	font-size: 0;
	&::-webkit-scrollbar {
		display: none;
	}
	a{
		vertical-align: middle;
		line-height: 1.9em;
		color: #757575;
		display: inline-block;
		margin-right:30px;
		font-size: 12px;
		height: 50%;
	}
	.router-link-exact-activ,.router-link-active,.active{
		color: #fb7299;
		border-bottom: 1.5px solid #fb7299;
	}
}
.nav-extend{
	position: absolute;
	width: 100%;
	left: 0;
	top: 32.5px;
	background-color: #FFFFFF;
	padding: 10px 15px 10px;
	transform-origin: top;
	height: auto;
	transition: all .2s linear;
	transform: translateY(-100%);
	overflow: hidden;
	line-height: .8em;
	&.active{
		height: auto;
		transform: none;
	}
	.nav-list{
		width:100%;
		font-size: 0;
		a{
			font-size: 12px;
			height: 33px;
			width: 16.67%;
			text-align: center;
			display: inline-block;
			color: #757575;
			margin-top: 5px;
			span{
				display: inline-block;
				line-height: 25px;
			}
		}
		.router-link-exact-active,.router-link-active,.active{
			span{
				color: #fb7299;
				border-bottom: 2px solid #fb7299;
			}
		}
	}
	
	.extend-svg{
		line-height: 0;
		text-align: center;
		width: 70px;
		margin: 0 auto;
		svg{
			width: 15px;
			height: 15px;
			fill: #aaa;
		}
	}
}
#app::before{
	content: "";
	display: block;
	height: 70.5px;
}
</style>
